<template>
    <div class="classification-box">
        <el-dialog
            :title="datatype == 1 ? '产品分类' : '服务分类'"
            :visible.sync="is_dialog"
            width="700px"
            top="11vh"
        >
            <div class="dialog-box">
                <div class="classification-list-box">
                    <div class="classification-list">
                        <div
                            class="level-list comm-list"
                            :class="catlsData_1.length > 11 ? 'is_ovl' : ''"
                        >
                            <div
                                v-for="item in catlsData_1"
                                :key="item.id"
                                class="list-row"
                                :class="item.is_acitve == 2 ? 'active' : ''"
                                @click="selectedCat(item, catlsData_1)"
                            >
                                <div class="list-title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="list-but">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        @click.stop="
                                            setEditddchildCat(item, catlsData_1)
                                        "
                                    ></el-button
                                    ><el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        @click.stop="
                                            setDelCatFun(item, catlsData_1)
                                        "
                                    ></el-button>
                                </div>
                                <i
                                    v-show="item.is_acitve == 2"
                                    class="el-icon-caret-right active-act"
                                ></i>
                            </div>
                        </div>
                        <div class="add-clas">
                            <el-button round @click="setAddchildCat('1')"
                                >添加一级</el-button
                            >
                        </div>
                    </div>
                    <div class="classification-list back-list-2">
                        <div
                            class="level-list comm-list"
                            :class="catlsData_2.length > 11 ? 'is_ovl' : ''"
                        >
                            <div
                                class="list-row"
                                :class="item.is_acitve == 2 ? 'active' : ''"
                                v-for="item in catlsData_2"
                                :key="item.id"
                                @click="selectedCat(item, catlsData_2)"
                            >
                                <div class="list-title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="list-but">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        @click.stop="
                                            setEditddchildCat(item, catlsData_2)
                                        "
                                    ></el-button
                                    ><el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        @click.stop="
                                            setDelCatFun(item, catlsData_2)
                                        "
                                    ></el-button>
                                </div>
                                <i
                                    v-show="item.is_acitve == 2"
                                    class="el-icon-caret-right active-act"
                                ></i>
                            </div>
                        </div>
                        <div class="add-clas" v-if="is_lev_2">
                            <el-button round @click="setAddchildCat('2')"
                                >添加二级</el-button
                            >
                        </div>
                    </div>
                    <div class="classification-list back-list-3">
                        <div
                            class="level-list comm-list"
                            :class="catlsData_3.length > 11 ? 'is_ovl' : ''"
                        >
                            <div
                                class="list-row"
                                v-for="item in catlsData_3"
                                :key="item.id"
                            >
                                <div class="list-title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="list-but">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        @click.stop="
                                            setEditddchildCat(item, catlsData_3)
                                        "
                                    ></el-button
                                    ><el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        @click.stop="
                                            setDelCatFun(item, catlsData_3)
                                        "
                                    ></el-button>
                                </div>
                            </div>
                        </div>
                        <div class="add-clas" v-if="is_lev_3">
                            <el-button round @click="setAddchildCat('3')"
                                >添加三级</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    name: "classification",
    props: ["datatype"],
    data() {
        return {
            is_dialog: false,
            catlsData_1: [], //一级分类
            catlsData_2: [], //二级分类
            catlsData_3: [], //三级分类
            levdata_1: {}, //添加二级的参数
            levdata_2: {}, //添加三级的参数
            is_lev_2: false, //二级的添加按钮控制
            is_lev_3: false, //三级的添加按钮控制
            lev_val: "", //在某层添加分类的层级
            lev_id: "", //在某层添加分类的id
            lev_fid: "", //在某层添加分类的父id
            lsname: "", //子分类的字段名
        };
    },
    created() {},
    methods: {
        // 选中分类
        selectedCat(item, data) {
            // 点过的不能再点
            if (this.levdata_1.id == item.id || this.levdata_2.id == item.id)
                return;

            // 收集当前点击数据，为添加做准备
            if (item.lever == 1) {
                this.levdata_1 = item;
            } else {
                this.levdata_2 = item;
            }

            // 判断是否有新增的二级或三级，将新增的添加到分类树
            if (this.lev_id) {
                if (this.lev_val == 2) {
                    this.catlsData_1.map((v) => {
                        if (v.id == this.lev_id) {
                            v[this.lsname] = this.catlsData_2;
                            this.lev_id = "";
                        }
                    });
                } else {
                    this.catlsData_1.map((v) => {
                        if (v.id == this.lev_fid) {
                            v[this.lsname].map((vs) => {
                                if (vs.id == this.lev_id) {
                                    vs[this.lsname] = this.catlsData_3;
                                    this.lev_id = "";
                                }
                            });
                        }
                    });
                }
            }

            // 点击不同一级或二级要初始层级的数据
            if (item.lever == 1) {
                this.levdata_2 = {};
                this.catlsData_2 = [];
                this.catlsData_3 = [];
                this.is_lev_2 = true;
                this.is_lev_3 = false;
                this.catlsData_1.map((v) => {
                    if (v[this.lsname]) {
                        v[this.lsname].map((vs) => {
                            vs.is_acitve = "1";
                        });
                    }
                });
            } else {
                this.is_lev_3 = true;
            }

            // 获取点击的后的下级数据
            data.map((v) => {
                if (item.id == v.id) {
                    v.is_acitve = "2";
                    if (item.lever == 1) {
                        this.catlsData_2 = v[this.lsname] || [];
                    } else {
                        this.catlsData_3 = v[this.lsname] || [];
                    }
                } else {
                    v.is_acitve = "1";
                }
            });
        },
        // 处理列表数据
        setdefaultData(item, data) {
            // data = 最新的分类列表数据

            data.map((v) => {
                v.is_acitve = "1"; //选中标识
                if (v[this.lsname]) {
                    v[this.lsname].map((vs) => {
                        vs.is_acitve = "1"; //选中标识
                        if (vs[this.lsname]) {
                            vs[this.lsname].map((vw) => {
                                vw.is_acitve = "1"; //选中标识
                            });
                        }
                    });
                }
            });

            if (!item) {
                // 初始列表
                this.catlsData_1 = data || [];
            } else if (item.lever == 1) {
                // 新增1级的处理
                this.catlsData_1.push(data[data.length - 1]);
            } else if (item.lever == 2) {
                // 新增2级的处理
                this.lev_val = item.lever;
                this.lev_id = item.id;
                let lev_data = {};
                data.map((v) => {
                    if (v.id == item.id) {
                        lev_data = v[this.lsname][v[this.lsname].length - 1];
                    }
                });
                this.catlsData_2.push(lev_data);
            } else if (item.lever == 3) {
                // 新增3级的处理
                this.lev_val = item.lever;
                this.lev_id = item.id;
                this.lev_fid = item.fid;
                let lev_data = {};
                data.map((v) => {
                    if (v.id == item.fid) {
                        v[this.lsname].map((vs) => {
                            if (vs.id == item.id) {
                                lev_data =
                                    vs[this.lsname][vs[this.lsname].length - 1];
                            }
                        });
                    }
                });
                this.catlsData_3.push(lev_data);
            }
            if (item) {
                this.$msg({ title: "添加成功" });
            }
        },

        // 删除
        setDelCatFun(item, data) {
            this.$confirm("确定删除该分类吗?", "删除分类", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let url =
                        this.datatype == 1
                            ? config.GDPRE_CAT_DEL
                            : config.PROPRE_CAT_DEL;
                    let param = {
                        id: item.id,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.$msg({ title: "删除成功" });
                        if (item.lever == 1) {
                            this.catlsData_2 = [];
                            this.catlsData_3 = [];
                            this.is_lev_2 = false;
                            this.is_lev_3 = false;
                        } else if (item.lever == 2) {
                            this.catlsData_3 = [];
                            this.is_lev_3 = false;
                        }
                        data.map((v, i) => {
                            if (v.id == item.id) {
                                data.splice(i, 1);
                            }
                        });
                        this.editathremovCatFun(item);
                    }
                })
                .catch(() => {});
        },
        // 准备编辑的参数
        setEditddchildCat(item, data) {
            this.setModifychildCat("2", item, data);
        },

        // 准备新增的参数
        setAddchildCat(type) {
            let data = {};
            if (type == 1) {
                data.id = "0";
                data.lever = "1";
            } else if (type == 2) {
                data.id = this.levdata_1.id;
                data.fid = this.levdata_1.fid;
                data.lever = "2";
            } else {
                data.id = this.levdata_2.id;
                data.fid = this.levdata_2.fid;
                data.lever = "3";
            }
            this.setModifychildCat("1", data);
        },

        // 新增/编辑分类
        setModifychildCat(type, data, obj = null) {
            this.$prompt(
                "请输入分类名称",
                `${
                    data.id == 0 && type == 1
                        ? "添加分类"
                        : data.id != 0 && type == 1
                        ? "添加下级分类"
                        : "编辑分类"
                }`,
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: /^.+$/,
                    inputErrorMessage: "请输入分类名称",
                    inputValue: type == 1 ? "" : data.title,
                }
            )
                .then(async ({ value }) => {
                    let url =
                        this.datatype == 1
                            ? config.GDPRE_CAT_SAVE
                            : config.PROPRE_CAT_SAVE;
                    let param = {
                        fid: type == 1 ? data.id : data.fid,
                        id: type == 1 ? undefined : data.id,
                        lever: data.lever,
                        title: value,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        if (type == 1) {
                            this.getCatlsDataFun(data);
                        } else {
                            this.$msg({ title: "编辑成功" });
                            obj.map((v) => {
                                if (v.id == data.id) {
                                    v.title = value;
                                }
                            });
                            this.editathremovCatFun(data, value);
                        }
                    }
                })
                .catch(() => {});
        },

        // 获取分类列表
        async getCatlsDataFun(item = null) {
            this.lsname = this.datatype == 1 ? "son" : "ls";
            let url =
                this.datatype == 1 ? config.GDPRE_CAT_LS : config.PROPRE_CAT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.setdefaultData(
                    item,
                    this.datatype == 1 ? res.data : res.data.catlist
                );
            }
        },

        // 处理删除和编辑
        editathremovCatFun(data, value = null) {
            if (data.lever == 1) {
                // 删除/编辑1级
                this.catlsData_1.map((v, i) => {
                    if (v.id == data.id) {
                        if (value) {
                            v.title = value;
                        } else {
                            this.catlsData_1.splice(i, 1);
                        }
                    }
                });
            } else if (data.lever == 2) {
                // 删除/编辑2级
                this.catlsData_1.map((v) => {
                    if (v.id == data.fid) {
                        v[this.lsname].map((vs, i) => {
                            if (vs.id == data.id) {
                                if (value) {
                                    vs.title = value;
                                } else {
                                    v[this.lsname].splice(i, 1);
                                }
                            }
                        });
                    }
                });
            } else {
                // 删除/编辑3级
                this.catlsData_1.map((v) => {
                    if (v[this.lsname]) {
                        v[this.lsname].map((vs) => {
                            if (vs.id == data.fid) {
                                vs[this.lsname].map((vw, i) => {
                                    if (vw.id == data.id) {
                                        if (value) {
                                            vw.title = value;
                                        } else {
                                            vs[this.lsname].splice(i, 1);
                                        }
                                    }
                                });
                            }
                        });
                    }
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.classification-box {
    .dialog-box {
        .classification-list-box {
            border: 1px #c9c7c7 solid;
            display: flex;
            .classification-list {
                flex: 1;
                padding: 10px;
                &.back-list-2 {
                    background: #fafafa;
                }
                &.back-list-3 {
                    background: #f2f2f2;
                }
                .level-list {
                    height: 600px;
                    overflow: auto;
                    &.is_ovl {
                        padding-right: 5px;
                    }
                    .list-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        min-height: 50px;
                        cursor: pointer;
                        padding: 0 10px;
                        padding-right: 15px;
                        border-radius: 5px;
                        margin-bottom: 5px;
                        border: 1px #e2dcdc solid;
                        &:last-child {
                            margin: 0;
                        }
                        &:hover {
                            background: #f1f1f1;
                        }
                        &.active {
                            position: relative;
                            background: #f1f1f1;
                            .list-title {
                                color: #4793fd;
                            }
                            .active-act {
                                position: absolute;
                                right: 0px;
                                top: calc(50% - 7px);
                                color: #606265;
                            }
                        }
                        .list-title {
                            word-wrap: break-word;
                            word-break: normal;
                            width: 50%;
                        }
                        ::v-deep.list-but {
                            .el-button {
                                padding: 5px;
                                font-size: 12px;
                            }
                        }
                    }
                }
                ::v-deep.add-clas {
                    margin-top: 10px;
                    .el-button {
                        width: 100%;
                        padding: 6px 23px;
                        color: #459ffd;
                        border-color: #459ffd;
                    }
                }
            }
        }
    }
}
</style>